<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
	<title>详情</title>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="msapplication-tap-highlight" content="no">

	<meta name="keywords" content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
	<script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!--Polyfill-->
	<!--[if lt IE 9]>
	<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-shim.js"></script>
	<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-sham.js"></script>
	<![endif]-->

	<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.2.js" charset="utf-8"></script>

	<!-- bootstrap -->
	<link href="../static/css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
	<!-- //bootstrap -->
	<link href="../static/css/dashboard.css" rel="stylesheet">
	<!-- Custom Theme files -->
	<link href="../static/css/style.css" rel='stylesheet' type='text/css' media="all" />
	<link href="../static/css/single.css" rel='stylesheet' type='text/css' media="all" />
	<script src="../static/js/jquery-1.11.1.min.js"></script>
	<!--start-smoth-scrolling-->
	<!-- fonts -->
	<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
	<link href='http://fonts.useso.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
	<!-- //fonts -->
	<script src="../static/js/webim/webim.config.js"></script>
	<script src="../static/js/webim/strophe-1.2.8.min.js"></script>
	<script src="../static/js/webim/websdk-1.4.13.js"></script>
	<script src="../static/js/webim/lts.js"></script>

</head>

<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<input type="hidden" id="pushUrl" name="pushUrl" value="${pushUrl}">
			<input type="hidden" id="pullRtmpUrl" name="pullRtmpUrl" value="${pullRtmpUrl}">
			<input type="hidden" id="closeLiveUrl" name="closeLiveUrl" value="${closeLiveUrl}">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
				 aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="index.html">
					<h1><img src="../static/images/logo.png" alt="" /></h1>
				</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<div class="top-search">
					<form class="navbar-form navbar-right">
						<input type="text" class="form-control" placeholder="Search...">
						<input type="submit" value=" ">
					</form>
				</div>
				<div th:include="header :: header"></div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</nav>
	<div th:include="menu :: menu"></div>
	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
		<div class="show-top-grids">
			<div class="col-sm-8 single-left">
				<div class="song">
					<div class="song-info">
						<h3>热门主播人气飙升0000</h3>
					</div>
					<div id="video-container" style="width:100%; height:auto;"></div>
					<div class="video-grid">
							&lt;!&ndash;<iframe src="https://www.youtube.com/embed/oYiT-vLjhC4" allowfullscreen></iframe>&ndash;&gt;
							<div id="video-container" style="width:100%; height:auto;"></div>
						</div>
				</div>
				<div class="song-grid-right">
					<!--<div class="share">
							<h5>Share this</h5>
							<ul>
								<li><a href="#" class="icon fb-icon">Facebook</a></li>
								<li><a href="#" class="icon dribbble-icon">Dribbble</a></li>
								<li><a href="#" class="icon twitter-icon">Twitter</a></li>
								<li><a href="#" class="icon pinterest-icon">Pinterest</a></li>
								<li><a href="#" class="icon whatsapp-icon">Whatsapp</a></li>
								<li><a href="#" class="icon like">Like</a></li>
								<li><a href="#" class="icon comment-icon">Comments</a></li>
								<li class="view">200 Views</li>
							</ul>
						</div>-->
				</div>
				<div class="clearfix"> </div>
				<div class="published">
					<script>
						$(document).ready(function () {
							size_li = $("#myList li").size();
							x = 1;
							$('#myList li:lt(' + x + ')').show();
							$('#loadMore').click(function () {
								x = (x + 1 <= size_li) ? x + 1 : size_li;
								$('#myList li:lt(' + x + ')').show();
							});
							$('#showLess').click(function () {
								x = (x - 1 < 0) ? 1 : x - 1;
								$('#myList li').not(':lt(' + x + ')').hide();
							});
						});
					</script>
					<div class="load_more">
						<ul id="myList">
							<li>
								<h4>主播人1号种子</h4>
								<p>人气直播人气直播人气直播人气直播人气直播人气直播人气直播人气直播人气直播人气直播人气直播人气直播</p>
							</li>
							<li>
								<p>Nullam fringilla sagittis tortor ut rhoncus. Nam vel ultricies erat, vel sodales leo. Maecenas pellentesque,
									est suscipit laoreet tincidunt, ipsum tortor vestibulum leo, ac dignissim diam velit id tellus. Morbi luctus
									velit quis semper egestas. Nam condimentum sem eget ex iaculis bibendum. Nam tortor felis, commodo faucibus
									sollicitudin ac, luctus a turpis. Donec congue pretium nisl, sed fringilla tellus tempus in.</p>
								<p>Nullam fringilla sagittis tortor ut rhoncus. Nam vel ultricies erat, vel sodales leo. Maecenas pellentesque,
									est suscipit laoreet tincidunt, ipsum tortor vestibulum leo, ac dignissim diam velit id tellus. Morbi luctus
									velit quis semper egestas. Nam condimentum sem eget ex iaculis bibendum. Nam tortor felis, commodo faucibus
									sollicitudin ac, luctus a turpis. Donec congue pretium nisl, sed fringilla tellus tempus in.</p>
								<div class="load-grids">
									<div class="load-grid">
										<p>Category</p>
									</div>
									<div class="load-grid">
										<a href="movies.html">Entertainment</a>
									</div>
									<div class="clearfix"> </div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="all-comments">
					<div class="all-comments-info">

					</div>
					<div class="media-grids">
						<div class="media">
							<h5>热门推荐</h5>
							<div class="media-left">
								<a href="#">

								</a>
							</div>
							<div class="media-body">
								<p>热门推荐热门推荐热门推荐热门推荐热门推荐热门推荐热门推荐热门推荐</p>
							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="col-md-4 rank-chart">
				<div class="rank-list"> 
					<h3>贡献榜</h3>
					<ul>
						<li> <span class="name">1. <i>文明看客1号</i></span> <span  class="name-num">100000</span> </li>
						<li> <span class="name">1. <i>文明看客1号</i></span> <span  class="name-num">100000</span> </li>
						<li> <span class="name">1. <i>文明看客1号</i></span> <span  class="name-num">100000</span> </li>
						<li> <span class="name">1. <i>文明看客1号</i></span> <span  class="name-num">100000</span> </li>
						<li> <span class="name">1. <i>文明看客1号</i></span> <span  class="name-num">100000</span> </li>
						<li> <span class="name">1. <i>文明看客1号</i></span> <span  class="name-num">100000</span> </li>
						<li> <span class="name">1. <i>文明看客1号</i></span> <span  class="name-num">100000</span> </li>
						<li> <span class="name">1. <i>文明看客1号</i></span> <span  class="name-num">100000</span> </li>
						
					</ul>
				</div>
				<div class="chatroom">
					<ul>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
						<li> <span class="name-yk">文明1号：</span> <span class="name-content">好像看到了什么</span> </li>
					</ul> 
					<div class="sendmsg">
						<input class="input-send" type="text" ><input class="send-submit" type="submit" value="确认">
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		<!-- footer -->
		<div class="footer">

		</div>
		<!-- //footer -->
	</div>
	<div class="clearfix"> </div>
	<div class="drop-menu">
		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
			<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
		</ul>
	</div>
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="../static/js/bootstrap.min.js"></script>
	<script>
		// $(document).ready(function(){
		//     var pullRtmpUrl = document.getElementById("pullRtmpUrl");
		//     var appPull;
		//     $.ajax({
		//         url: "/singleDate",
		//         type: 'POST',
		//         data: '',
		//         async:false,
		//         processData:false,
		//         contentType:false,
		//         success: function (data) {
		//             console.log(data);

		//             pullRtmpUrl = data.data.pullRtmpUrl;
		//             appPull = data.data.appPull;
		//             console.log(pullRtmpUrl);
		//         },
		//         error: function (data) {
		//             console.log(data.code);
		//         }
		//     });

		//     console.log("pullRtmpUrl:"+pullRtmpUrl)
		//     var player = new TcPlayer('video-container', {
		//         //"m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8", //请替换成实际可用的播放地址
		//         //"m3u8": "http://imgcache.qq.com/open/qcloud/video/vcplayer/demo/tcplayer-cover.html", //请替换成实际可用的播放地址
		//         "m3u8": "http://play.hc-stone.cn/live/888.m3u8", //请替换成实际可用的播放地址
		//         "rtmp": "rtmp://play.hc-stone.cn/live/888", //请替换成实际可用的播放地址
		//         "flv": "http://play.hc-stone.cn/live/888.flv", //请替换成实际可用的播放地址
		// 		/*"m3u8_hd" : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f230.av.m3u8",
		//         "m3u8_sd" : "http://200002949.vod.myqcloud.com/200002949_b6ffc.f220.av.m3u8",*/
		//         "autoplay" : true, //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
		//         "coverpic" : "http://www.test.com/myimage.jpg", //播放器设置封面
		//         "wording": {
		//             2032: "请求视频失败，请检查网络",
		//             2048: "请求m3u8文件失败，可能是网络错误或者跨域问题"
		//         },
		//         "width" : '480',//视频的显示宽度，请尽量使用视频分辨率宽度
		//         "height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
		//     });
		// });

		/*(function () {
            function getParams(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
				console.log("name:"+name)
                var r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    console.log("r:"+r)
                    return decodeURIComponent(r[2]);
                }
                return null;
            }

            function getPathParams() {
                var path = location.pathname.split('/');
                if (path[1] == 'vod-player') {
                    return {
                        'path': location.origin + path.slice(0, 4).join('/'),
                        'appid': path[2],
                        'fileid': path[3]
                    }
                } else {
                    return null;
                }
            }

            var rtmp = getParams('rtmp'),
                flv = getParams('flv'),
                m3u8 = getParams('m3u8'),
                mp4 = getParams('mp4'),
                live = (getParams('live') == 'true' ? true : false),
                //coverpic = getParams('coverpic'),
                coverpic="http://www.test.com/myimage.jpg", //播放器设置封面
                width = getParams('width'),
                height = getParams('height'),
                volume = getParams('volume'),
                //flash = (getParams('flash') == 'true' ? true : false),
                flash = false,
                x5_player = (getParams('x5_player') == 'false' ? false : true),
                h5_flv = (getParams('h5_flv') == 'true' ? true : false),
                autoplay = (getParams('autoplay') == 'true' ? true : false),

                flashUrl = (function () {
                    var params = getPathParams();
                    if (params) {
                        return params.path + '/player/release/QCPlayer.swf';
                    }
                    return '//imgcache.qq.com/open/qcloud/video/player/release/QCPlayer.swf'
                })(),
                log = getParams('log');
            /!**
             * 视频类型播放优先级
             * mobile ：m3u8>mp4
             * PC ：RTMP>flv>m3u8>mp4
             *!/
            var pullRtmpUrl = document.getElementById("pullRtmpUrl");
            $.ajax({
                url: "/singleDate",
                type: 'POST',
                data: '',
                async:false,
                processData:false,
                contentType:false,
                success: function (data) {
                    console.log(data);

                    pullRtmpUrl = data.data.pullRtmpUrl;
                    console.log(pullRtmpUrl);
                },
                error: function (data) {
                    console.log(data.code);
                }
            });
            var options = {
                rtmp: pullRtmpUrl,
                flv: pullRtmpUrl ,
                m3u8: m3u8 || pullRtmpUrl ,
                m3u8_hd:pullRtmpUrl,
                m3u8_sd: pullRtmpUrl,
                mp4: mp4 || pullRtmpUrl,
                //autoplay: autoplay,
                autoplay: true,
                live: live,
                width: width || '480',
                height: height || '320',
                volume: volume || 0.5,
                flash: false,
                flashUrl: flashUrl,
                x5_player: x5_player,
                h5_flv: h5_flv,
                wording: {
                    2032: '请求视频失败，请检查网络',
                    2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
                },
                listener: function (msg) {

                }
            };
            console.log("options+rtmp:"+options.rtmp)
            console.log("options+flv:"+options.flv)
            console.log("options+mp4:"+options.mp4)
            console.log("options+m3u8:"+options.m3u8)
            console.log("options+flash:"+options.flash)
            window.tcplayer = new TcPlayer('video-container', options);

        })();*/
	</script>
	<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
</body>

</html>